<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传统节日</title>
    <style>
        /* 主页的样式 */
        body {
            font-family: Arial, sans-serif;
            height: 100%; /* 设置整个页面高度 */
            margin: 0;
            padding: 0;
            background: url('images/festival.jpg') no-repeat center center fixed; /* 设置背景图片 */
            background-size: cover;
            overflow-x: hidden; /* 防止页面水平滚动 */
            overflow-y: auto; /* 允许垂直滚动 */
        }

        header {
            background-color: #8B0000;
            color: white;
            padding: 5px 0;
            text-align: center;
            font-size: 1.2em;
        }
        /* 导航栏样式 */
        nav ul {
            list-style-type: none;
            padding: 0;
            text-align: center;
            margin: 0; /* 移除默认外边距 */
        }

        nav ul li {
            display: inline-block;
            margin: 0 20px; /* 左右外边距为20px */
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold; /* 粗体 */
            position: relative;
            transition: color 0.3s ease, transform 0.3s ease; /* 文字颜色和缩放效果的过渡 */
        }

        /* 动态效果：鼠标悬停时 */
        nav ul li a:hover {
            color: #FFD700; /* 鼠标悬停时改变文字颜色 */
            transform: scale(1.1); /* 鼠标悬停时放大 */
        }

        /* 动态效果：点击时 */
        nav ul li a:active {
            color: #FF4500; /* 点击时改变文字颜色 */
            transform: scale(0.9); /* 点击时缩小 */
        }

        /* 添加下划线效果 */
        nav ul li a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px; /* 在文字下方 */
            width: 100%;
            height: 2px;
            background-color: #FFD700; /* 下划线颜色 */
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }

        nav ul li a:hover::after {
            transform: scaleX(1);
            transform-origin: left; /* 下划线从左向右展开 */
        }

        main {
            padding: 2em;
            max-width: 800px;
            margin: 0 auto;
        }

        section {
            margin-bottom: 3em;
        }

        article {
            margin-bottom: 2em;
            padding: 1em;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        article:hover {
            transform: translateY(-5px);
        }

        h2 {
            margin-bottom: 1em;
            font-size: 1.8em;
            text-align: center;
            color: #8B0000;
        }

        h3 {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 0.5em;
        }

        p {
            color: #666;
            line-height: 1.6;
        }

        img {
            width: 100%;
            display: block;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        img:hover {
            transform: scale(1.05);
        }

        footer {
            text-align: center;
            padding: 1px;
            background-color: #8B0000;
            color: white;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>中国传统文化推广 - 传统节日</h1>
        <nav>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="history.html">历史与传说</a></li>
                <li><a href="philosophy.html">哲学思想</a></li>
                <li><a href="arts.html">文学艺术</a></li>
                <li><a href="festivals.html">传统节日</a></li>
                <li><a href="customs.html">民俗风情</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>传统节日</h2>
            <article>
                <h3>春节</h3>
                <p>春节历史悠久，起源于早期人类的原始信仰与自然崇拜，由上古时代岁首祈岁祭祀演变而来，是一种原始的宗教仪式，人们会在年初之际举行祭祀活动，祈求来年五谷丰登、人畜兴旺。这种祭祀活动随着时间的推移逐渐演变为各种庆祝活动，最终形成了今天的春节。“春节”一词开始使用是在辛亥革命以后 。
春节期间，中国的汉族和很多少数民族都要举行各种活动以示庆祝。这些活动均以祭祖敬老、感恩祈福、阖家团聚、除旧布新、迎禧接福、祈求丰年为主要内容，带有浓郁的民族特色 。春节民俗众多，包括喝腊八粥、祭灶神、扫尘、贴春联、贴年画、倒贴福字、除夕守岁、吃饺子、压岁钱、拜年、逛庙会等</p>
                <img src="images/chunjie.png" alt="春节">
            </article>
            <article>
                <h3>中秋节</h3>
                <p>中秋节（Mid-Autumn Festival），又称“月夕”、“秋节”、“仲秋节”、“八月节”、“八月会”、“追月节”、“玩月节”、“拜月节”、“女儿节”、“团圆节”，是流行于全国众多民族中的传统文化节日。因其恰值三秋之半，故得此名。据说此夜月亮最大最圆最亮。从古至今人们都有中秋之夜饮宴赏月的习俗，回娘家的媳妇是日必返夫家，以寓圆满、吉庆之意。其起源于上古时代, 普及于汉代，定型于唐朝初年，盛行于宋朝以后，与春节、清明节、端午节并称为中国四大传统节日。 中秋节源自对天象的崇拜，由上古时代秋夕祭月演变而来。中秋节自古便有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗。</p>
                <img src="images/zhongqiu.png" alt="中秋节">
            </article>
            <article>
                <h3>端午节</h3>
                <p>端午节作为节日，形成于汉代。东汉应劭《风俗通义》中就有农历五月五日人们防避兵役鬼魅、防病防疫的记载。端午节的起源，自古到今说法不一，主要说法有：纪念屈原说、迎涛神说（伍子胥含冤死后化为涛神）、恶日说、龙的节日说（即祭祀龙图腾说）、夏至说。 端午节的起源涵盖了古老星象文化、人文哲学等方面内容，蕴含着深邃丰厚的文化内涵，在传承发展中杂糅了多种民俗为一体，各地因地域文化不同而又存在着习俗内容或细节上的差异。
端午节主要风俗有挂钟馗像、躲午、帖午叶符、悬挂菖蒲、艾草、游百病、佩香囊、备牲醴、赛龙舟，比武、击球、荡秋千、涂雄黄、饮用雄黄酒、菖蒲酒，吃五毒饼、咸蛋、粽子和时令鲜果等，除了有迷信色彩的活动渐已消失外，其余流传至中国各地及邻近诸国。</p>
                <img src="images/duanwu.png" alt="端午节">
            </article>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 202006402111李采珍</p>
    </footer>
</body>
</html>
